import React, { Component } from 'react'
import SearchHeader from '../../components/SearchHeader'
import { Flex } from 'antd-mobile'
import { getTiaoList } from '../../api/filter'

// 导入样式
import styles from './index.module.css'
import Filter from './components/Filter'
import {
    List,
    AutoSizer,
    WindowScroller,
    InfiniteLoader
} from 'react-virtualized'
import HouseItem from '../../components/HouseItem'

const { label } = JSON.parse(window.localStorage.getItem('liu_city'))


export default class index extends Component {

    state = {
        list: [],
        count: 0
    };
    // 初始化
    filters = {}

    componentDidMount() {
        this.searchHouseList();
    }

    // 渲染房屋列表项
    renderHouseList = ({ key, index, style }) => {
        // 根据索引号来获取当前这一行的房屋数据
        const { list } = this.state
        const house = list[index]

        // 判断 house 是否存在
        // 如果不存在，就渲染 loading 元素占位
        if (!house) {
            return (
                <div key={key} style={style}>
                    <p className={styles.loading} />
                </div>
            )
        }
        console.log(this.state.count);
        return (
            <HouseItem
                key={key}
                // 注意：该组件中应该接收 style，然后给组件元素设置样式！！！
                style={style}
                src={'http://localhost:8080' + house.houseImg}
                title={house.title}
                desc={house.desc}
                tags={house.tags}
                price={house.price}
            />
        )
    }

    // 提供给Filter组件调用的函数，接受参数 filters
    onFilter = filters => {
        this.filters = filters;
        this.searchHouseList();
    };

    // 获取房源列表的函数 
    async searchHouseList() {
        // 获取城市信息
        // 请求数据
        let { data } = await getTiaoList({
            cityId: label,
            ...this.filters,
            start: 1,
            end: 20
        });
        this.setState({
            list: data.body.list,
            count: data.body.count
        })
    }

    // 判断列表中的每一行是否加载完成
    isRowLoaded = ({ index }) => {
        return !!this.state.list[index]
    }

    // 用来获取更多房屋列表数据
    // 注意：该方法的返回值是一个 Promise 对象，并且，这个对象应该在数据加载完成时，来调用 resolve 让Promise对象的状态变为已完成。
    loadMoreRows = ({ startIndex, stopIndex }) => {
        // return fetch(`path/to/api?startIndex=${startIndex}&stopIndex=${stopIndex}`)
        //   .then(response => {
        //     // Store response data in list...
        //   })
        return new Promise(resolve => {
            getTiaoList({
                cityId: label,
                ...this.filters,
                start: startIndex,
                end: stopIndex
            }).then(res => {
                // console.log('loadMoreRows：', res)
                this.setState({
                    list: [...this.state.list, ...res.data.body.list]
                })

                // 数据加载完成时，调用 resolve 即可
                resolve()
            })
        })

    }

    render() {
        const { count } = this.state
        return (
            <div>
                <Flex className={styles.header}>
                    <i className="iconfont icon-back" onClick={() => this.props.history.go(-1)}></i>
                    <SearchHeader className={styles.searchHeader} cityName={label}></SearchHeader>
                </Flex>

                {/* 条件筛选栏 */}
                <Filter onFilter={this.onFilter} />

                {/* 房屋列表 */}
                <div className={styles.houseItems}>
                    <InfiniteLoader
                        isRowLoaded={this.isRowLoaded}
                        loadMoreRows={this.loadMoreRows}
                        rowCount={count}
                    >
                        {({ onRowsRendered, registerChild }) => (
                            <WindowScroller>
                                {({ height, isScrolling, scrollTop }) => (
                                    <AutoSizer>
                                        {({ width }) => (
                                            <List
                                                onRowsRendered={onRowsRendered}
                                                ref={registerChild}
                                                autoHeight // 设置高度为 WindowScroller 最终渲染的列表高度
                                                width={width} // 视口的宽度
                                                height={height} // 视口的高度
                                                rowCount={count} // List列表项的行数
                                                rowHeight={120} // 每一行的高度
                                                rowRenderer={this.renderHouseList} // 渲染列表项中的每一行
                                                isScrolling={isScrolling}
                                                scrollTop={scrollTop}
                                            />
                                        )}
                                    </AutoSizer>
                                )}
                            </WindowScroller>
                        )}
                    </InfiniteLoader>
                </div>
            </div>
        )
    }
}
